<!--
数据驱动UI变化
m -> v (model, view)
虚拟DOM

v -> m (v-model)

mvvm

双向数据绑定实现方式
vue2: Object.defineProperty()
vue3: ES6的语法 Proxy 对象

[Proxy 优势]

diff (新旧DOM对比)
数据更改 -> 虚拟DOM更改 -> view

生命周期：
父 嵌套 子组件
-->

<template>
  <h1>{{ msg }}</h1>
  <button
    type="button"
    @click="count++"
  >
    count is: {{ count }}
  </button>
</template>

<script>
export default {
  // data: {}
  // data: function () {
  data() {
    return {
      count: 0,
    }
  },
  // props: ["msg"]
  props: {
    msg: {
      type: String
      // default: ""
      // required: true
    },
    /*arr: {
      type: Array,
      default: () => []
    },
    obj: {
      type: Object,
      default: () => ({})
    }*/
  }
}
</script>

<style scoped>

/*
a[vue-asd123123]

穿透scoped 修改子组件样式
/deep/ a {

}
 */
a {
  color: #42b983;
}
</style>
